<template>
  <!--行-->
  <el-row class="home" :gutter="20">
    <!--列-->
    <el-col :span="8" style="margin-top: 20px">
      <!--管理员card-->
      <el-card shadow="hover"> <!--shadow鼠标指向的悬浮效果-->
        <div class="user">
          <img :src="userImg"/>
          <div class="userinfo">
            <p class="name">KuQi</p>
            <p class="access">超级管理员</p>
          </div>
        </div>
        <div class="login-info">
          <p>上次登录时间:<span>2021-10-27</span></p>
          <p>上次登录地点:<span>蚌埠</span></p>
        </div>
      </el-card>
      <!--销售信息card -->
      <el-card style="margin-top: 20px">
        <!--绑定数据tableDat-->
        <el-table :data="tableData" style="height: 417px">
          <!--循环遍历,:label第一次循环铺垫tableLabel的值，:prop每次循环铺垫tableData的值，-->
          <el-table-column
            show-overflow-tooltip
            v-for="(val,key) in tableLabel"
            :key="key"
            :prop="key"
            :label="val"
          >
          </el-table-column>
        </el-table>
      </el-card>
    </el-col>

    <!--列-->
    <el-col :span="16" style="margin-top: 20px">
      <div class="num">
        <el-card
          shadow="hover"
          v-for="item in countData"
          :key="item.name"
          :body-style="{display:'flex',padding:0}"
        >
          <!--每次遍历铺垫图标，颜色-->
          <i
            class="icon"
            :class="`el-icon-${item.icon}`"
            :style="{background:item.color}"
          >
          </i>
          <!--每次遍历铺垫值，和名字-->
          <div class="detail">
            <p class="num">￥{{ item.value }}</p>
            <p class="txt">{{ item.name }}</p>
          </div>
        </el-card>
      </div>

      <el-card shadow="hover" style="height: 280px">
        <div ref="echart" style="height: 280px"></div>
      </el-card>
      <div class="graph">
        <el-card shadow="hover" style="height: 260px">
          <div ref="userEchart" style="height: 280px"></div>
        </el-card>
        <el-card shadow="hover" style="height: 260px">
          <div ref="videoEchart" style="height: 240px"></div>
        </el-card>
      </div>
    </el-col>

  </el-row>
</template>

<script>
import {getHome} from "../../api/data"
import * as echarts from "echarts"

export default {
  name: "Home",
  data() {
    return {
      userImg: require("../../assets/images/user.jpg"), //返回图片位置
      tableData: [
        /* {
           name:"JAVA",
           todayBuy:100,
           monthBuy:300,
           totalBuy:500
         },
         {
           name: "Python",
           todayBuy: 100,
           monthBuy: 300,
           totalBuy: 700
         },
         {
           name: "C",
           todayBuy: 200,
           monthBuy: 300,
           totalBuy: 700,
         },
         {
           name: "C++",
           todayBuy: 400,
           monthBuy: 300,
           totalBuy: 700,
         },
         {
           name: "Rust",
           todayBuy: 300,
           monthBuy: 400,
           totalBuy: 800
         }*/
      ],

      //表格列表名称label，及其属性名prop
      tableLabel: {
        name: "课程",
        todayBuy: "今日购买",
        monthBuy: "本月购买",
        totalBuy: "总购买"
      },

      countData: [
        {
          name: "今日支付订单",
          value: 1234,
          icon: "success",
          color: "#2ec7c9"
        },
        {
          name: "今日收藏订单",
          value: 210,
          icon: "star-on",
          color: "#ffb980"
        },
        {
          name: "今日未支付订单",
          value: 1234,
          icon: "s-goods",
          color: "#5ab1ef"
        },
        {
          name: "本月支付订单",
          value: 1234,
          icon: "success",
          color: "#2ec7c9"
        },
        {
          name: "本月收藏订单",
          value: 1234,
          icon: "star-on",
          color: "#ffb980"
        },
        {
          name: "本月未支付订单",
          value: 1234,
          icon: "s-goods",
          color: "#5ab1ef"
        }
      ],

      echartsData: {
        order: {
          legend: {
            //图例文字颜色
            textStyle: {
              color: "#333",
            },
          },
          grid: {
            left: "20%",
          },
          tooltip: {
            trigger: "axis",
          },
          xAxis: {
            type: "category",
            data: [],
            axisLine: {
              lineStyle: {
                color: "#17b3a3",
              },
            },
            axisLabel: {
              color: "#17b3a3",
            },
          },
          yAxis: [
            {
              type: "value",
              axisLine: {
                color: "#17b3a3",
              },
            },
          ],
          color: ["#2ec7c9", "#b6a2de", "#5ab1ef", "#ffb980", "#d87a80", "#7d98b3"],
          series: [],
        },
        user: {
          legend: {
            testStyle: {
              color: "#333",
            }
          },
          grid: {
            left: "20%",
          },
          tooltip: {
            trigger: "axis",
          },
          xAxis: {
            type: "category",//类轴
            data: [],
            axisLine: {
              lineStyle: {
                color: "#18b3a3",
              },
            },
          },
          yAxis: [
            {
              type: "value",
              axisLine: {
                color: "#17b3a3",
              },
            },
          ],
          color: ["#2ec7c9", "#b6a2de"],
          series: [],
        },
        video:{
          tooltip:{
            trigger:"item",
          },
          color:[
            "#0f78f4",
            "#dd536b",
            "#9462e5",
            "#a6a6a6",
            "#e1bb22",
            "#39c362",
            "#3ed1cf",
          ],
          series:[],
        },
      }
    }
  },

  //mounted钩子，用来写异步请求
  mounted() {
    this.getTableData()
  },

  methods: {
    getTableData() {
      getHome().then((res) => {
        this.tableData = res.data.tableData

        //折线图的展示
        const order = res.data.orderData;
        console.log(order)
        //设置x轴数据
        this.echartsData.order.xAxis.data = order.date;
        //遍历key获取他们的名字
        let keyArray = Object.keys(order.data[0]);
        //遍历名字，获取他们相对应的值;并铺上折线图上显示
        keyArray.forEach((key) => {
          this.echartsData.order.series.push({
            name: key,
            data: order.data.map((item) => item[key]),
            type: "line",
          });
        });
        const myEcharsOrder = echarts.init(this.$refs.echart);
        myEcharsOrder.setOption(this.echartsData.order)

        //柱状图
        this.echartsData.user.xAxis.data = res.data.userData.map((item)=>item.date)
        this.echartsData.user.series.push({
          name:"新增用户",
          data:res.data.userData.map((item)=>item.new),
          type:"bar",
        });
        this.echartsData.user.series.push({
          name:"活跃用户",
          data:res.data.userData.map((item)=>item.active),
          type:"bar",
        })
        const myEchartsUser = echarts.init(this.$refs.userEchart);
        myEchartsUser.setOption(this.echartsData.user)


        //饼状图
        this.echartsData.video.series.push({
          data:res.data.videoData,
          type:"pie",
        });
        const myEcharsVideo = echarts.init(this.$refs.videoEchart);
        myEcharsVideo.setOption(this.echartsData.video);
      })
    }
  }
}
</script>

<style lang="scss" scoped>
/*外部样式引入，@import*/
@import "../../assets/scss/home";
</style>
